<template>
  <div class="home">
    <h1>首页</h1>
    <el-row>
      <el-col :span="7"
        ><div class="grid-content bg-purple1">
          <p>{{ userCount }}</p>
          <h3><i class="el-icon-user"></i> 用户总数</h3>
        </div></el-col
      >
      <el-col :span="7"
        ><div class="grid-content bg-purple-light">
          <p>{{ productCount }}</p>
          <h3><i class="el-icon-s-fold"></i>商品总数</h3>
        </div></el-col
      >
      <el-col :span="7"
        ><div class="grid-content bg-purple2">
          <p>{{ orderCount }}</p>
          <h3><i class="el-icon-circle-check"></i>订单总数</h3>
        </div></el-col
      >
    </el-row>
  </div>
</template>

<script>
import { home } from "../http/index.js";
export default {
  data() {
    return {
      userCount: 123,
      productCount: 456,
      orderCount: 789,
    };
  },
  methods: {
    carList() {
      home({ userCount: 123, productCount: 456, orderCount: 789 }).then(
        (res) => {
          console.log(res);
          this.userCount = res.data.data.userCount;
          this.productCount = res.data.data.productCount;
          this.orderCount = res.data.data.orderCount;
          console.log(this.orderCount);
        }
      );
    },
  },
  created() {
    this.carList();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
};
</script>

<style lang='scss' scoped>
h1 {
  font-size: 34px;
  margin: 20px 10px;
}
.el-row {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple1 {
  background: #f0b45f;
}
.bg-purple2 {
  background: #5db8d3;
}
.bg-purple-light {
  background: #6cbe6c;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  color: #fff;
  text-align: center;
  height: 200px;
  box-sizing: border-box;
  padding-top: 50px;
  p{
    font-size: 40px;
  }

}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
